<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>实践题 - 选项卡</title>
  <style type="text/css">
    * {
      /* 保证标签和下面的div无缝隙 */
      margin: 0;
      padding: 0;
    }

    /* 默认隐藏 */
    ul {
      list-style-type: none;
    }

    #tablist {
      width: 350px;
      height: 200px;
      margin: 20px 30%;
    }

    #tablist div {
      border: 1px solid black;
      /* 去除顶部边框 */
      border-top: none;
    }

    #ul1 {
      /* 下面的红色边框 */
      border-bottom: 2px solid red;
      /* 刚好是li的高度+边框长度，保证两者无缝隙 */
      height: 32px;
    }

    li {
      display: inline-block;
      width: 60px;
      line-height: 30px;
      text-align: center;
      border: 1px solid black;
      border-bottom: none;
    }

    li.active {
      /* 下面的红色边框以及选中时白色底框 */
      border-top: 2px solid red;
      border-bottom: 2px solid white;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var totalDiv = document.getElementsByName("content");
      // 获取li
      var lilist = document.getElementsByTagName("li");
      for (var i = 0; i < lilist.length; i++) {
        lilist[i].index = i;
        lilist[i].onmouseover = function () {
          // 很奇怪。下面的写法会导致active失效
          for (var i = 0; i < lilist.length; i++) {
            // for (i in lilist.length) {
            lilist[i].className = "";
          }
          // 当前鼠标停留的对象设置为active
          this.className = "active";
          for (var j = 0; j < totalDiv.length; j++) {
            totalDiv[j].style = "display:none"
          }
          totalDiv[this.index].style = "display:block"
        }
      }
    }
  </script>

</head>

<body>
  <!-- HTML页面布局 -->
  <div id="tablist">
    <ul id="ul1">
      <li class="active">房产</li>
      <li>家居</li>
      <li>二手房</li>
    </ul>
    <div name="content" style="display:display">
      275万购昌平邻铁三居 总价20万买一居<br>
      200万内购五环三居 140万安家东三环<br>
      北京首现零首付楼盘 53万购东5环50平<br>
      京楼盘直降5000 中信府 公园楼王现房
    </div>
    <div name="content" style="display:none">
      40平出租屋大改造 美少女的混搭小窝<br>
      经典清新简欧爱家 90平老房焕发新生<br>
      新中式的酷色温情 66平撞色活泼家居<br>
      瓷砖就像选好老婆 卫生间烟道的设计
    </div>
    <div name="content" style="display:none">
      通州豪华3居260万 二环稀缺2居250w甩<br>
      西3环通透2居290万 130万2居限量抢购<br>
      黄城根小学学区仅260万 121平70万抛!<br>
      独家别墅280万 苏州桥2居优惠价248万
    </div>
  </div>


</body>

</html>